Estoy tratando de crear una variable de una clase dentro del HTML interno aquí:
ruleData.forEach((rule) => { rulesWrapper.innerHTML += ` <div class='rule'> <div id='rule-title' class='rule-title' onclick='showRuleDetail(${counter})'> <div> <p>${counter}.</p> <p>${rule.title}</p> </div> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.5 5.5L7.5 10.5L12.5 15.5" stroke="#1E1E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class='rule-body'> <p>${rule.body}</p> </div> </div> `; counter++; }); Por ejemplo, quiero apuntar a la clase rule-body dentro de este HTML interno y cambiar su fondo
como esto:
let ruleBody = document.querySelectorAll('.rule-body'); ruleBody[0].style.background = 'red';Pero esto no funciona, me sale este error:
TypeError: Cannot read properties of undefined (reading 'style')Debe acceder al .rule-body después del HTML interno y asegurarse de que esté en el DOM. Entonces, esto debería funcionar perfectamente bien:
const container = document.querySelector("#container"); const button = document.querySelector("#button"); function exec() { container.innerHTML = `<div class='rule-body'>yo</div>`; const ruleBody = document.querySelectorAll('.rule-body'); ruleBody[0].style.backgroundColor = 'red'; } button.onclick = exec; <div id="container"> </div> <button id="button"> CLICK TO INSERT </button>Puedes usar DOMParser para esto
ruleData.forEach((rule) => { let rule_html = ` <div class='rule'> <div id='rule-title' class='rule-title' onclick='showRuleDetail(${counter})'> <div> <p>${counter}.</p> <p>${rule.title}</p> </div> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.5 5.5L7.5 10.5L12.5 15.5" stroke="#1E1E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class='rule-body'> <p>${rule.body}</p> </div> </div> `; let rule = new DOMParser().parseFromString(rule_html,"text/xml").firstChild; rule.querySelector('.rule-body').style.background = 'red'; rulesWrapper.appendChild(rule); counter++; }); Además, si el contador es el índice de ruleData, también puede usar el índice de forEach. (rule,i)=>{
Sugiero mapear y delegar
const ruleData = [{"title":"Title 1","body":"This is the body"},{"title":"Title 2","body":"This is the body"}] const rulesWrapper = document.getElementById("rulesWrapper"); rulesWrapper.innerHTML = ruleData.map((rule,i) => ` <div class='rule'> <div class='rule-title' data-idx='${i}'> <div> <p>${i}.</p> <p>${rule.title}</p> </div> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.5 5.5L7.5 10.5L12.5 15.5" stroke="#1E1E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class='rule-body'> <p>${rule.body}</p> </div> </div> `).join(""); rulesWrapper.addEventListener("click", function(e) { const tgt=e.target.closest(".rule-title"); if (tgt) console.log(tgt.dataset.idx) }) <div id="rulesWrapper"></div>